{% extends "basic.html" %}

{% block include_script %}
    <script src="/static/js/d3.v3.min.js"></script>
{% endblock %}

{% block mainbody %}

    <div class="index_hearder">
        <div id="myCarousel" class="carousel slide" style="margin-top:-20px">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <div class="background-image-holder" style="background: url(/static/image/sentiment_3.jpg) 50% 0;
                    background-position: 50% 78% !important;">
                    </div>
                </div>
                <div class="item">
                    <div class="background-image-holder"
                         style="background: url(/static/image/topic_3.jpg);
                          background-position: 50% 24% !important;">
                    </div>
                </div>

            </div>

            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <div class="header_info">
            <h1 style="color: white;">Twitter数据挖掘及其可视化</h1>
            <a  href="/sentiment" class="btn btn-primary btn-filled" id="header_info_button">Start sentiment Now</a>
        </div>

    </div>
    <script>
        $(function () {
            $('#myCarousel').on('slide.bs.carousel', function (e) {
{#                var slideFrom = $(this).find('.active').index();#}
                var slideTo = $(e.relatedTarget).index();
{#                console.log(slideFrom + ' => ' + slideTo);#}
                var change_obj = $("#header_info_button");
                if(slideTo == 1){
                    change_obj.attr("href","/topic");
                    change_obj.text("Start topic Now");
                }else{
                    change_obj.attr("href","/sentiment");
                    change_obj.text("Start sentiment Now");
                }
            });
        });
    </script>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>话题检测</h1>
                    <h6>Topic detection</h6>
                    <p class="lead">
                        使用twitter Stream API 提供的实时数据。
                        可以追踪特定关键词的推文、某些用户的推文、在某些特定的地理位置（GEO）的推文。<br>
                        使用变分推断的动态词库的WOLDA算法，挖掘实时主题中的关键词，并跟踪话题趋势。
                    </p>
                </div>
                <div class="col-md-6 text-center">
                    <img src="/static/image/topic_4.jpg" alt="sentiment" class="img-thumbnail image-section">
                </div>
            </div>
        </div>
    </section>


    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-6 text-center">
                    <img src="/static/image/sentiment_1.gif" alt="sentiment" class="img-thumbnail image-section">
                </div>
                <div class="col-md-6">
                    <h1>情感分析</h1>
                    <h6>Sentiment analysis</h6>
                    <p class="lead">
                        使用twitter search API提供的数据进行查询。<br>
                        使用最大熵分类器,训练数据来自 SemEval比赛 <br>
                        可以帮助:
                    <li>用户查询人们谈论某些特定词时候，带有的感情色彩</li>
                    <li>商家查看消费者对于新推出的产品的评价</li>
                    <br>
                    </p>
                </div>
            </div>
        </div>
    </section>


    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <h1>数据可视化</h1>
                    <h6>Data visualization</h6>
                    <p class="lead">
                        利用D3、ECharts 进行结果可视化 <br>
                        出了基本的柱状图、饼状图外，还有多种可视化图表：<br>如treemap、bubble、heatmap、sunburst等<br>
                        直观的反映出结果<br>
                    </p>
                </div>
                <div class="col-md-6 text-center ">
                    <div class="visualization"></div>
                    <script src="../static/js/index.js"></script>
                </div>
            </div>
        </div>
    </section>


    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-6 text-center">
                    <img src="/static/image/others.jpg" alt="others" class="img-responsive img-thumbnail image-section">
                </div>
                <div class="col-md-6">
                    <h1>其他</h1>
                    <h6>Others</h6>
                    <p class="lead">
                        使用 Django 进行WEB端开发 <br>
                        使用 Bootstrap 帮助界面设计 <br>
                        使用 MongoDB 存储数据，必要时可以进行数据分片 <br>
                        使用 Git 进行版本控制，并托管于 <a href="https://github.com/hrwhisper/twitterDataMining">Github <i
                            class="fa fa-github" aria-hidden="true"></i> </a><br>
                    </p>
                </div>
            </div>
        </div>
    </section>


    {% include "footer.html" %}

{% endblock %}